<template>
    <div>
        <div class="outtitle">举报处理</div>
        <div v-for="(item, index) in reportlist" :key="index">
            <div class="outtext">
                <div class="outbox">
                    <div class="outuid">用户名:{{ item.uid }}</div>
                    <div class="outdata">{{ item.time }}</div>
                </div>
                <div class="outtitles">{{ item.title }}</div>
                <div class="outtexts" v-html="item.content"></div>
                <div class="outuser">{{ item.reason }}</div>
                <el-button class="outbutton" @click="falsesItem(item.rid)">未通过</el-button>
                <el-button class="outbuttons" @click="truesItem(item.eid)" type="danger">下架</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "four",
    data() {
        return {
            reporttexts: [],
            reportlist: [],
        };
    },
    methods: {
        //获取用户信息
        gettextdata() {
            fetch(`http://localhost:3000/reportdata`, {
                method: 'GET'
            })
                .then(res => res.text())
                .then(res => {
                    this.reporttexts = res
                    this.reportlist = JSON.parse(this.reporttexts)
                    // console.log(res);
                });
        },
        //不通过举报审核
        falsesItem(rid) {
            fetch(`http://localhost:3000/report/${rid}`, {
                method: 'POST'
            }).then(() => {
                this.gettextdata();
            })
            this.$message.success('审核成功')
            // location.reload();
        },
        //通过举报审核
        truesItem(eid) {
            fetch(`http://localhost:3000/reports/${eid}`, {
                method: 'POST'
            }).then(() => {
                this.gettextdata();
            })
            this.$message.success('审核成功')
            // location.reload();
        },
    },
    mounted() {
        this.gettextdata();
        // setInterval(() => {
        //     this.gettextdata();
        // }, 1000);
    },
}
</script>
<style>
.outtitle {
    width: 200px;
    height: 50px;
    font-size: 30px;
    font-weight: bold;
    color: black;
    margin-left: 1%;
    margin-top: 5%;
}

.outtext {
    width: 80%;
    height: auto;
    background-color: rgb(241, 241, 241);
    margin-bottom: 30px;
    margin-left: 150px;
}

.outuid {
    border-radius: 50%;
    width: 20%;
    height: auto;
    margin-left: 5%;
    margin-top: 2%;
    padding-top: 20px;
    padding-bottom: 5px;
    font-size: 18px;
}

.outtitles {
    /* width: 20%; */
    height: 20px;
    margin-left: 10%;
    margin-top: 2%;
    font-size: 18px;
}

.outtexts {
    width: 70%;
    height: auto;
    margin-left: 15%;
    margin-top: 2%;
    background-color: rgb(231, 230, 227);
    margin-bottom: 30px;
}

.outdata {
    width: 30%;
    height: 20px;
    margin-right: 10px;
    margin-left: 5%;
}

.outbox {
    width: 100%;
    height: 80px;
}

.outuser {
    margin-bottom: 10px;
    margin-left: 78%;
    color: tomato;
    font-size: 20px;
    font-weight: bold;
}

.outbutton {
    margin-left: 70%;
}

.outbuttons {
    margin-left: 10%;
}

.outtexts img {
    max-width: 200px;
    height: auto;
}
</style>